<template>
  <div class="home">
    <el-card class="grid grid-cols-4 gap-2">
      <h1>主应用</h1>
      <!--    通过router-link形式,但是无法动态加载端口-->
      <!--    <router-link to="/sub-app-a">Load SubApp A</router-link> |-->
      <!--    <router-link to="/sub-app-b">Load SubApp B</router-link>-->
      <!--    通过连接形式-->
      <!--    <a href="http://localhost:3001/sub-app-a/" target="_self">Load SubApp A</a> |-->
      <!--    <a href="http://localhost:3002/sub-app-b/" target="_self">Load SubApp B</a>-->
      <!--    通过element-plus组件实现a标签-->
      <el-card @click="LoadSubApp(3001, 'sub-app-a')" class="grid-cols-1">
        子应用A
      </el-card>
      <el-card @click="LoadSubApp(3002, 'sub-app-b')" class="grid-cols-1 mt-20">
        子应用B
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue"

const LoadSubApp = (port, subAppName) => {
  window.location.href = `http://localhost:${port}/${subAppName}/`;
}
</script>



